<template>
  <svg class="base" :width="width" :height="height" :style="{color}">
    <!--引用 svg 中对应 id 的 symbol-->
    <use :xlink:href="`#${xtSvgPrefix}${xtSvgSplit}${fileName}`"></use>
  </svg>
</template>

<script>
import {config} from "@/config/index.js";

export default {
  name: 'xt-svg',
  props: {
    /**
     * @description svg 文件名，不带后缀
     */
    fileName: {
      type: String,
      required: true,
    },
    /**
     * @description svg 图形宽度，不设置则默认为父元素的宽度
     */
    width: {
      type: String,
      default: '100%'
    },
    /**
     * @description svg 图形高度, 不设置则默认为父元素的高度
     */
    height: {
      type: String,
      default: '100%'
    },
    /**
     * @description svg 图形的填充颜色, 不设置则默认为黑色
     */
    color: {
      type: String,
      default: '#000000'
    }
  },
  data() {
    return {
      // xt-svg symbol 中 id 名称的前缀
      xtSvgPrefix: config.xtSvgPrefix,
      // xt-svg symbol 中 id 名称的连接符
      xtSvgSplit: config.xtSvgSplit
    }
  }
};
</script>

<style lang="scss" scoped>
// svg 元素的基础样式
.base {
  display: block;
  fill: currentColor;
}
</style>